<template>
  <div
    class="w-full h-full flex overflow-auto justify-center items-center relative"
  >
    <div v-if="!userStore.isLogin" class="m-auto">请先登录哟~~</div>
    <div
      v-else
      v-masonry
      :fit-width="true"
      :origin-left="false"
      transition-duration="0.25s"
      item-selector=".grid-item"
      class="grid-container px-1 sm:px-0 w-full"
    >
      <div
        v-masonry-tile
        class="grid-item rounded-xl overflow-hidden"
        v-for="video in list"
        :key="video"
      >
        <VideoCard :viewFlag="false" :videoInfo="video"></VideoCard>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from "@/stores/user";
import { getVideoListByUserIdAPI } from "@/http/api/video";
import _debounce from "lodash/debounce";
import { ref, getCurrentInstance, onUpdated } from "vue";
const { appContext } = getCurrentInstance();

const userStore = useUserStore();
const list = ref([]);

getVideoListByUserIdAPI(userStore.userInfo.userId).then((res) => {
  if (res.code === 200 && res.data) {
    list.value = list.value.concat(res.data);
  }
});

onUpdated(() => {
  setTimeout(() => {
    appContext.config.globalProperties.$redrawVueMasonry();
    console.log("redraw");
  }, 1000);
});
</script>

<style lang="scss" scoped>
.grid-container {
  width: 100%;
  height: 100% !important;
  padding-top: 2rem;
  margin: 0 auto;
  .grid-item {
    width: clamp(10rem, 45vw, 12rem);
    margin: 0 1rem 1rem 0;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  }
}
</style>